<template>
  <div 
    class="page"
		:style="{
			paddingTop: pagePaddingTop
		}"
    >
    <nav-bar title="详情"></nav-bar>
    <my-map></my-map>
    <div class="profile flex-column">
      <spot-card-describe :info="option" />
      <photo-group :imgs="imgs" />
      <div class="group1 flex-row">
        <been-here
          :avatars="beenHere.avatars"
          :totle="beenHere.totle"
        />
        <div class="button-wrapper">
          <van-button
            color="#00CA9D"
            round
            size="large"
            >
            打卡
          </van-button>
        </div>
      </div>
      <div class="group2 flex-row">
        <div class="totle">{{allComment}}</div>
        <my-dropdown 
          :value="sortRules"
          :option="sortOption"
          @change="handleRuleChange"
        />
      </div>
    </div>
    <div class="comments flex-column">
      <comment
        v-for="(item, index) in comments"
        :key="index"
        :option="item"
        :first="index === 0"
        />
    </div>
  </div>  
</template>

<script>
import {
  getPostDetail
} from '../utils/api'
export default {
  data() {
    return {
      option: undefined,
      imgs: undefined,
      beenHere: undefined,
      comments: undefined,
      commentsCount: undefined,
      sortRules: 1,
      sortOption: [
        { text: '最近', value: 0 },
        { text: '热门', value: 1 },
        { text: '好评', value: 2 },
        { text: '差评', value: 3}
      ],
      staticData: `{
        "name": "美景1",
        "id": 1,
        "imgs": [
          "https://picsum.photos/seed/food1/500/800",
          "https://picsum.photos/seed/food2/500/800",
          "https://picsum.photos/seed/food3/500/800",
          "https://picsum.photos/seed/food4/500/800",
          "https://picsum.photos/seed/food5/500/800"
        ],
        "beenHere": {
          "totle": 87,
          "avatars": [
            "https://picsum.photos/seed/avatar10/100/100",
            "https://picsum.photos/seed/avatar11/100/100",
            "https://picsum.photos/seed/avatar12/100/100",
            "https://picsum.photos/seed/avatar13/100/100",
            "https://picsum.photos/seed/avatar14/100/100"
          ]
        },
        "commentsCount": 17,
        "comments": [
          {
            "user": {
              "name": "Victoria Banks",
              "id": 10001,
              "avatar": "https://picsum.photos/seed/avatar1/100/100"
            },
            "content": "Wow! I didn’t know that there is such a cool spot so close to my home town! 👍You guys need to see that!",
            "score": 4.5,
            "like": 2,
            "time": 1602406205505,
            "id": 10001,
            "liked": false
          },
          {
            "user": {
              "name": "Kathy Tucker",
              "id": 10002,
              "avatar": "https://picsum.photos/seed/avatar2/100/100"
            },
            "content": "Love this spot! I was there with my fiance and a dog once and it’s the best place to spend time not that far from the city.",
            "score": 5,
            "like": 81,
            "time": 1602405913096,
            "id": 10002,
            "liked": true
          },
          {
            "user": {
              "name": "Marco del Toro",
              "id": 996,
              "avatar": "https://picsum.photos/seed/avatar3/100/100"
            },
            "content": "Haters gonna hate. I hate it so much. DEAL WITH IT!!!!",
            "score": 2,
            "like": 11,
            "time": 1602345313096,
            "id": 10003,
            "liked": false
          }
        ]
      }`
    }
  },
  computed: {
    allComment() {
      return this.commentsCount ? `${this.commentsCount}条评论` : `还没有人评论哦`
    }
  },
  onLoad(option) {
    option = this.option = JSON.parse(decodeURIComponent(option.option))
    // this.getPost(`${option.type}/${option.id}.json`)
    this.useStaticData()
    this.sortComments(this.sortRules)
  },
  methods: {
    getPost(path) {
      getPostDetail(path).then(
        (res) => {
          const data = res.data
          this.imgs = data.imgs
          this.comments = data.comments
          this.beenHere = data.beenHere
          this.commentsCount = data.commentsCount
        }
      )
    },
    useStaticData() {
      const data = JSON.parse(this.staticData)
      this.imgs = data.imgs
      this.comments = data.comments
      this.beenHere = data.beenHere
      this.commentsCount = data.commentsCount
    },
    sortComments(value) {
      switch (value) {
        case 0:
          return this.comments.sort((a, b) => b.time - a.time)
        case 1:
          return this.comments.sort((a, b) => b.like - a.like)
        case 2:
          return this.comments.sort((a, b) => b.score - a.score)
        case 3:
          return this.comments.sort((a, b) => a.score - b.score)
        default: 
          return
      }
    },
    handleRuleChange(value) {
      value = value.detail.__args__[0]
      this.sortRules = value
      this.sortComments(value)
    }
  }
}
</script>

<style lang="less" scoped>
.page {
  .profile {
    align-items: start;
    padding: 0 40rpx;
    .group1 {
      width: 100%;
      justify-content: space-between;
      been-here {
        margin: 52rpx 0;
      }
      .button-wrapper {
        width: 200rpx;
      }
    }
  }
  .group2 {
    width: 100%;
    justify-content: space-between;
  }
}
</style>
